<script>
import BarVue from 'comp/echarts_comps/BarVue.vue';
import PlotVue from 'comp/echarts_comps/PlotVue.vue';
import PieVue from 'comp/echarts_comps/PieVue.vue';
import TextVue from 'comp/common_comps/TextVue.vue';
// import CesiumMapVue from 'comp/CesiumMapComp.vue';
import MapVue from 'comp/echarts_comps/MapVue.vue';
import { http } from "@/utils/requests";

export default {
  name: "ForestBigScreen",
  components: {
    BarVue, PlotVue, PieVue, TextVue, MapVue
    // , CesiumMapVue
  },
  data() {
    return {
      title: "雄安新区碳收支可视化大屏展示系统",
      yearValue: 2020,
      countryValue: "安新县",
      yearList: [],
      countryList: []
    }
  },
  mounted() {
    const year_url = "/api/years/all";
    this.httpRequest(this.yearList, year_url, {});
    const country_url = "/api/country/all";
    this.httpRequest(this.countryList, country_url, {});
    this.createBackground();
  },
  methods: {
    httpRequest(data, url, param) {
      http.getRequest(url, param).then(res => {
        if (data.length != 0) {
          data.length = 0;
        }
        data.push(...res);
      }, err => {
        console.log(err);
      });
    },
    buttonUpdata() {
      this.$nextTick(() => {
        this.$refs.textvue.httpRequest({});
        this.$refs.barvue.httpRequest({});
        this.$refs.plotvue.httpRequest({});
        this.$refs.pievue.httpRequest({});
      })
    },
    createBackground() {
      var canvas = document.getElementById("backgroundCanvas");
      var ctx = canvas.getContext("2d");

      // 设置 canvas 样式和尺寸
      canvas.style.position = "fixed";
      canvas.style.top = "0";
      canvas.style.left = "0";
      canvas.style.zIndex = "-1";
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // 设置 canvas 大小为窗口大小
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
  }
}
</script>
<template>
  <div class="content">
    <el-container class="container">
      <!-- 大屏标题 -->
      <el-header class="sysheader">
        <h2 style="color: #fff; text-align: center; font-size: 20px;">{{ title }}</h2>
      </el-header>
      <!-- 大屏主要部分 -->
      <el-main class="map_main">
        <!-- 地图显示内容 -->
        <!-- <CesiumMapVue /> -->
        <MapVue />
      </el-main>
      <div class="echarts-class">
        <el-aside class="chartsspace">
          <div style="background-color:#000d4a; width: 100%; height: 100%;">
            <div class="chart left_top ">
            <div class="selection" style="margin-left: 50px;">
              县区:
              <el-select v-model="countryValue" class="m-2" placeholder="Select" size="large"
                style="width: 240px; opacity: 0.3;">
                <el-option v-for="item in countryList" :key="item.coun_id" :label="item.coun_name"
                  :value="item.coun_name"  />
              </el-select>
            </div>
            <div class="selection" style="margin-left: 50px;">
              年份:
              <el-select v-model="yearValue" class="m-2" placeholder="Select" size="large" style="opacity: 0.3;width: 240px">
                <el-option v-for="item in yearList" :key="item.year_id" :label="item.year_num" :value="item.year_num" style="background-color: (255,255,255,0.3);" />
              </el-select>
            </div>
            <TextVue :year=yearValue :country=countryValue ref="textvue" class="text-vue" style="opacity: 0.3;width: 240px;margin-left: 50px"/>
            <el-button type="primary" @click="buttonUpdata()" style="margin-left: 150px;">切换</el-button>
          </div>
            <div class="chart left_bottom ">
            <PieVue :year=yearValue :country=countryValue ref="pievue" style="margin-left: -30px;"/>
            </div>
          </div>
        </el-aside>
        <el-aside class="chartsspaceright">
          <div style="background-color:#000d4a; width: 100%; height: 100%;">
            <div class="chart left_bottom ">
            <BarVue :year=yearValue ref="barvue" />
            </div>
            <div class="chart left_bottom ">
            <PlotVue :country=countryValue ref="plotvue" />
            </div>
            <div>月份数据展示</div>
          </div>
        </el-aside>
      </div>
    </el-container>
  </div>
  <canvas id="backgroundCanvas"></canvas>

</template>

<style>
body,
.backgroundCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

html {
  height: 100%;
  margin: 0;
  height: 100%;
  margin: 0;
  background: #000d4a url(bg.jpg) center top;
  background-size: cover;
  color: #666;
}
.chart {
  border-radius: 20px;
  padding: 20px;
  width: 400px;

  background: #53697670;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #292e494f, #53697650);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #292e4968, #5369766a);
  position: relative;
  /* left: 50px; */
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.left-top {
  height: 50%;
  padding: 10;
}
.left-bottom{
  height: 10%;
  padding: 10;
}
.container {
  height: 100vh;
  width: 100vw;
  display: flex;

}

.sysheader {
  background: url(head_bg.png) no-repeat center center;
  background-size: 100% 100%;
}

h2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.map_main {
  height: 900px;
  width: 1600px;
  position: absolute;
}

/* .echarts-class { */
  /* display: flex; */
  /* z-index: 2; */
  /* width: 100vw; */
  /* height: 100vh;、 */
  /* height: calc(100% - 30px);} */

.echarts-class {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100vh; /* 将父容器高度设置为视口的高度 */
}

.selection {
  flex: 1; /* 控件自动适应父容器的宽度 */
  max-width: 300px; /* 控件的最大宽度 */
  margin-right: 10px; /* 控件之间的间距 */
}
.chartsspace {
  flex: 1; /* 让此元素填充剩余空间 */
  width: 30%;
  --el-aside-width: 28vw;
  overflow-y: hidden;
}

.chartsspaceright {
  height: 100%;
  --el-aside-width: 30vw;
  margin-left: auto;

}

.el-select .el-input__inner {
    color:black;
    opacity: 1;
  }
</style>